import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, message, Select, InputNumber } from 'antd'
import _ from 'loadsh'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import { getDictinarys } from '../ajax'
import { awaitWrap, strToNum } from '@js/tool'
import style from './Step.module.less'
import Text from '@components/Text'
const { Item } = Form
const { Option, OptGroup } = Select
export default class StepOneInput extends Component {
  state = {
    keyTitleMap: {},
    dictionaries: {}
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 初始化字典
  async initDictionary () {
    const [e, d] = await awaitWrap(getDictinarys(['结案退费事由']))
    if (e) {
      return message.warning(e.message)
    }
    this.setState({
      dictionaries: d
    })
  }

  computeFee () {
    const c = this.props.formRef.current
    if (c !== null) {
      const o = c.getFieldsValue(['vars']).vars
      const aFee = strToNum(o.closure_refund_fee_acceptance)
      const pFee = strToNum(o.closure_refund_fee_processing)
      c.setFieldsValue({ vars: { ...o, closure_refund_fee: aFee + pFee } })
    }
  }

  computeAntiFee () {
    const c = this.props.formRef.current
    if (c !== null) {
      const o = c.getFieldsValue(['vars']).vars
      const aFee = strToNum(o.closure_refund_c_fee_acceptance)
      const pFee = strToNum(o.closure_refund_c_fee_processing)
      c.setFieldsValue({ vars: { ...o, closure_refund_c_fee: aFee + pFee } })
    }
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
      this.getArbitratorList()
    }
  }

  componentDidMount () {
    this.initDictionary()
    this.initKeyTitleMap()
  }

  // 渲染提出人可选项
  renderSubmitalOptions () {
    const o = this.state.submitOptions
    let keys = Object.keys(o)
    keys = keys.filter(k => o[k].length)
    return keys.map(k => {
      const l = o[k]
      return (
        <OptGroup key={k} label={k}>
          {l.map(li => {
            return (
              <Option key={li.id} value={li.id}>{li.name}</Option>
            )
          })}
        </OptGroup>
      )
    })
  }

  render () {
    const { keyTitleMap, dictionaries } = this.state
    const reasons = dictionaries['结案退费事由'] || []
    return (
      <div>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '128px' }} label='操作者'>
              <span>{this.props.userInfo.realname}</span>
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_fee_acceptance']} label={keyTitleMap.closure_refund_fee_acceptance} rules={[{ required: true, message: `${keyTitleMap.closure_refund_fee_acceptance}不能为空` }]}>
              <InputNumber className={style.full} placeholder='请输入' min={0} precision={2} onChange={() => this.computeFee()} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_fee_processing']} label={keyTitleMap.closure_refund_fee_processing} rules={[{ required: true, message: `${keyTitleMap.closure_refund_fee_processing}不能为空` }]}>
              <InputNumber className={style.full} placeholder='请输入' min={0} precision={2} onChange={() => this.computeFee()} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_fee']} label={keyTitleMap.closure_refund_fee} rules={[{ required: true, message: `${keyTitleMap.closure_refund_fee}不能为空` }]}>
              <Text format={(v) => v === undefined ? 0 : v} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_c_fee_acceptance']} label={keyTitleMap.closure_refund_c_fee_acceptance} rules={[{ required: true, message: `${keyTitleMap.closure_refund_c_fee_acceptance}不能为空` }]}>
              <InputNumber className={style.full} placeholder='请输入' min={0} precision={2} onChange={() => this.computeAntiFee()} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_c_fee_processing']} label={keyTitleMap.closure_refund_c_fee_processing} rules={[{ required: true, message: `${keyTitleMap.closure_refund_c_fee_processing}不能为空` }]}>
              <InputNumber className={style.full} placeholder='请输入' min={0} precision={2} onChange={() => this.computeAntiFee()} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_c_fee']} label={keyTitleMap.closure_refund_c_fee} rules={[{ required: true, message: `${keyTitleMap.closure_refund_c_fee}不能为空` }]}>
              <Text format={(v) => v === undefined ? 0 : v} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '128px' }} name={['vars', 'closure_refund_cause']} label={keyTitleMap.closure_refund_cause} rules={[{ required: true, message: `${keyTitleMap.closure_refund_cause}不能为空` }]}>
              <Select placeholder='请选择' allowClear>
                {reasons.map((li, i) => {
                  return (
                    <Option key={i} value={li.value}>{li.title}</Option>
                  )
                })}
              </Select>
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

StepOneInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object,
  dictionaries: PropTypes.object
}

StepOneInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {},
  dictionaries: {}
}
